<nz-date-picker #datePicker
                style="width: 100%"
                [nzRenderExtraFooter]="footerRender"
                [(ngModel)]="date"
                [nzAllowClear]="nzAllowClear"
                [nzShowNow]="false"
                [nzShowToday]="false"
                (ngModelChange)="onChange($event)"
                [nzFormat]="dateFormat"
></nz-date-picker>

<ng-template #footerRender>
  <div class="exact_time_wrap" *ngIf="dateFormat != 'yyyy-MM-dd'">
    <div nz-row>
      <div nz-col nzSpan="13">
        <input type="text" nz-input [(ngModel)]="hh" style="width: 36px;" nzSize="small" (click)="selectHour()"/>
        <span>&nbsp;:&nbsp;</span>
        <input type="text" nz-input [(ngModel)]="mm" style="width: 36px;" nzSize="small" (click)="selectMinute()"/>
        <span>&nbsp;:&nbsp;</span>
        <input type="text" nz-input [(ngModel)]="ss" style="width: 36px;" nzSize="small" (click)="selectSecond()"/>
      </div>
      <div nz-col nzSpan="11" class="text-right">
        <a nz-button nzType="link" (click)="currDateTime(datePicker)">此刻</a>
        <button nz-button nzType="primary" nzShape="round" nzSize="small"
                (click)="confirm(datePicker)">确定</button>
      </div>
    </div>

    <div class="exact_time" *ngIf="showHour">
      <div class="text-center">选择小时</div>
      <div class="hour">
        <div (click)="selectHour(hour)" class="item" *ngFor="let hour of hours">{{hour}}</div>
      </div>
    </div>

    <div class="exact_time" *ngIf="showMinute">
      <div class="text-center">选择分钟</div>
      <div class="minute">
        <div (click)="selectMinute(minute)" class="item" *ngFor="let minute of minutes">{{minute}}</div>
      </div>
    </div>

    <div class="exact_time" *ngIf="showSecond">
      <div class="text-center">选择秒钟</div>
      <div class="minute">
        <div (click)="selectSecond(second)" class="item" *ngFor="let second of seconds">{{second}}</div>
      </div>
    </div>

  </div>
</ng-template>
